<template>
<div v-if="record" class="siteAside-container">
  <div class="avatar">
    <Avatar :site="headPortrait" :size="150"/>
  </div>
  <h1 class="titel">{{record.siteTitle}}</h1>
  <bar :bar="bar"/>
  <div class="contact" ><contact :contact-data="contactData"/></div>
  <p class="footer">
    {{record.icp}}
  </p>
</div>
</template>

<script>
import Avatar from '@/components/Avatar'
import contact from './Contact'
import headUrl from '../../assets/head.jpg'
import bar from './Menu'
import { mapState } from 'vuex'
export default {
  name: 'index',
  components: {
    Avatar,
    contact,
    // eslint-disable-next-line vue/no-unused-components
    bar
  },
  computed: {
    ...mapState('setting', ['record'])
  },
  data () {
    return {
      contactData: [
        {
          type: 'qq',
          message: '2114628366',
          src: ''
        },
        {
          type: 'weixin',
          message: 'twy128649',
          src: ''
        },
        {
          type: 'mail',
          message: 't2114628366@163.com',
          src: ''
        }
      ],
      bar: [
        {
          type: 'home',
          text: '首页',
          name: 'index'
        },
        {
          type: 'blog',
          text: '文章',
          name: 'Blog'
        },
        {
          type: 'about',
          text: '关于我',
          name: 'About'
        },
        {
          type: 'code',
          text: '项目&效果',
          name: 'project'
        },
        {
          type: 'chat',
          text: '留言板',
          name: 'message'
        }
      ],
      headPortrait: headUrl
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../styles/var";
.siteAside-container{
  width: 100%;
  height: 100%;
  background: @dark ;
  padding: 20px 0px;
  box-sizing: border-box;
  overflow: hidden;
  .avatar{
    display:flex;
    align-items: center;
    justify-content: center;
  }
  .contact{
    margin: 10px 0;
  }
  .titel{
    font-size: 1.2em;
    text-align: center;
    color: #ffffff;
  }
  .footer{
    text-align: center;
    font-size: 12px;
    color: @gray;
  }
}
</style>
